<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#dd1').click(function(){
				$('#sb1,#sb2').splitbutton({plain:false});
				$('#mb3').menubutton({plain:false});
			});
			$('#dd2').click(function(){
				$('#sb1,#sb2').splitbutton({plain:true});
				$('#mb3').menubutton({plain:true});
			});
		});
	</script>
</head>
<body>
	<h1>SplitButton</h1>
	<p>Similar to MenuButton, SplitButton include linkbutton and menu but can act as a single button.</p>
	<div style="margin-bottom:10px;">
		<a href="javascript:void(0)" id="dd1">3D</a>
		<a href="javascript:void(0)" id="dd2">Plain</a>
	</div>
	<div style="background:#C9EDCC;padding:5px;width:600px;">
		<a href="javascript:void(0)" id="sb1" class="easyui-splitbutton" menu="#mm1" icon="icon-edit" onclick="javascript:alert('edit')">Edit</a>
		<a href="javascript:void(0)" id="sb2" class="easyui-splitbutton" menu="#mm2" icon="icon-ok" onclick="javascript:alert('ok')">Ok</a>
		<a href="javascript:void(0)" id="mb3" class="easyui-menubutton" menu="#mm3" icon="icon-help">Help</a>
	</div>
	<div id="mm1" style="width:150px;">
		<div icon="icon-undo">Undo</div>
		<div icon="icon-redo">Redo</div>
		<div class="menu-sep"></div>
		<div>Cut</div>
		<div>Copy</div>
		<div>Paste</div>
		<div class="menu-sep"></div>
		<div>
			<span>Toolbar</span>
			<div style="width:150px;">
				<div>Address</div>
				<div>Link</div>
				<div>Navigation Toolbar</div>
				<div>Bookmark Toolbar</div>
				<div class="menu-sep"></div>
				<div>New Toolbar...</div>
			</div>
		</div>
		<div icon="icon-remove">Delete</div>
		<div>Select All</div>
	</div>
	<div id="mm2" style="width:100px;">
		<div icon="icon-ok">Ok</div>
		<div icon="icon-cancel">Cancel</div>
	</div>
	<div id="mm3" style="width:150px;">
		<div>Help3</div>
		<div class="menu-sep"></div>
		<div>About3</div>
	</div>
</body>
</html>